<template>
  <div class="filterSelect-container">
    <div class="el-select">
      <div class="change_range" :style="{ width: width }">
        <!-- <div class="change_range_top">
          <span class="title">可见范围</span>
        </div> -->
        <div class="change_data">
          <div class="change_range_top">
            <span class="title">已选择对象</span>
            <div class="top_button">
              <el-button @click.stop="openDialog" type="primary" size="small"
                >添 加</el-button
              >
              <el-button @click="emptyChange" type="danger" plain size="small"
                >清 空</el-button
              >
            </div>
          </div>
          <div class="data_range">
            <template v-for="(item, index) in dataClassTagsList">
              <div
                class="range_item"
                v-if="item.selectArr.length > 0"
                :key="index"
              >
                <span style="float: left">{{ item.name }}：</span>
                <div class="change_tag">
                  <el-tag
                    v-for="(tag, i) in item.selectArr"
                    :key="tag.fullName"
                    closable
                    color="#FFFFFF"
                    @close="closeTag(index, i)"
                  >
                    {{ tag.fullName }}
                  </el-tag>
                </div>
              </div>
            </template>
            <div class="change_range_top" style="margin-top: 20px">
              <span class="title">排除人员</span>
              <div class="top_button">
                <el-button @click="changeExclude" type="primary" size="small"
                  >添 加</el-button
                >
                <el-button
                  @click="emptyChangeExclude"
                  type="danger"
                  plain
                  size="small"
                  >清 空</el-button
                >
              </div>
            </div>
            <div class="range_item">
              <!-- <span style="float: left">排除人员：</span>
              <div class="change_btn">
                <el-button
                  @click="changeExclude"
                  type="danger"
                  size="mini"
                  icon="el-icon-plus"
                  plain
                  >添加</el-button
                >
              </div> -->
              <div class="exclude_tag">
                <el-tag
                  v-for="(tag, i) in exclude.selectArr"
                  :key="tag.fullName"
                  closable
                  color="#fef0f0"
                  type="danger"
                  @close="closeTagExclude(i)"
                >
                  {{ tag.fullName }}
                </el-tag>
              </div>
            </div>
            <div class="range_item" v-if="userName" style="margin-top: 20px">
              <div class="change_range_top">
                <span class="title">人员展示</span>
              </div>
              <el-tooltip class="item" effect="dark" placement="top">
                <div slot="content" style="max-width: 820px">
                  {{
                    userName ? userName.substring(0, userName.length - 1) : ""
                  }}
                </div>
                <span class="prople_name">{{
                  userName ? userName.substring(0, userName.length - 1) : ""
                }}</span>
              </el-tooltip>
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-dialog
      title="选择用户"
      :close-on-click-modal="false"
      :visible.sync="visible"
      class="jsbos-dialog jsbos-dialog_center transfer-dialog"
      lock-scroll
      append-to-body
      width="800px"
      :modal-append-to-body="false"
      @close="onClose"
    >
      <div class="transfer__body">
        <div class="transfer-pane">
          <div class="transfer-pane__tools">
            <el-input
              placeholder="请输入关键词查询"
              v-model="keyword"
              @keyup.enter.native="getData"
              v-debounce-input:500ms="getData"
              clearable
              class="search-input"
            >
              <el-button
                slot="append"
                icon="el-icon-search"
                @click="getData"
              ></el-button>
            </el-input>
          </div>
          <div class="transfer-pane__body">
            <el-tabs
              v-model="activeName"
              class="transfer-pane__body-tab"
              :class="{ 'hasSys-tab': hasSys }"
            >
              <el-tab-pane label="部门" name="department">
                <el-tree
                  :data="treeData2"
                  :props="props"
                  :expand-on-click-node="false"
                  :default-expand-all="true"
                  check-on-click-node
                  @node-click="handleNodeClick2"
                  class="jsbos-common-el-tree"
                  node-key="id"
                  v-loading="loading"
                >
                  <span class="custom-tree-node" slot-scope="{ node, data }">
                    <i :class="data.icon"></i>
                    <span class="text">{{ node.label }}</span>
                  </span>
                </el-tree>
              </el-tab-pane>
              <el-tab-pane label="角色" name="Role" class="have_head_icon">
                <el-tree
                  :data="treeData3"
                  :props="props"
                  :expand-on-click-node="false"
                  :default-expand-all="true"
                  check-on-click-node
                  @node-click="handleNodeClick2"
                  class="jsbos-common-el-tree"
                  node-key="id"
                  v-loading="loading"
                >
                  <span class="custom-tree-node" slot-scope="{ node, data }">
                    <img
                      v-if="data.headIcon && data.headIcon != '[]'"
                      class="head_icon"
                      :src="
                        data.headIcon && data.headIcon.substring(0, 4) == 'http'
                          ? data.headIcon
                          : baseApi + '' + data.headIcon
                      "
                      alt=""
                    />
                    <div class="">
                      <div class="select_list_item">
                        <span class="custom_head">{{
                          data.fullName.charAt(0)
                        }}</span>
                      </div>
                    </div>
                    <span class="text">
                      <span class="node_name">{{ node.label }}</span
                      ><br />
                      <span
                        class="node_organization"
                        v-if="data.companyName || data.organizeName"
                        >{{ data.companyName }}/{{ data.organizeName }}</span
                      >
                    </span>
                  </span>
                </el-tree>
              </el-tab-pane>
              <el-tab-pane label="岗位" name="Position" class="have_head_icon">
                <el-tree
                  :data="treeData4"
                  :props="props"
                  :expand-on-click-node="false"
                  :default-expand-all="true"
                  check-on-click-node
                  @node-click="handleNodeClick2"
                  class="jsbos-common-el-tree"
                  node-key="id"
                  v-loading="loading"
                >
                  <span class="custom-tree-node" slot-scope="{ node, data }">
                    <img
                      v-if="data.headIcon && data.headIcon != '[]'"
                      class="head_icon"
                      :src="
                        data.headIcon && data.headIcon.substring(0, 4) == 'http'
                          ? data.headIcon
                          : baseApi + '' + data.headIcon
                      "
                      alt=""
                    />
                    <div class="">
                      <div class="select_list_item">
                        <span class="custom_head">{{
                          data.fullName.charAt(0)
                        }}</span>
                      </div>
                    </div>
                    <span class="text">
                      <span class="node_name">{{ node.label }}</span
                      ><br />
                      <span
                        class="node_organization"
                        v-if="data.companyName || data.organizeName"
                        >{{ data.companyName }}/{{ data.organizeName }}</span
                      >
                    </span>
                  </span>
                </el-tree>
              </el-tab-pane>
              <el-tab-pane label="分组" name="Group" class="have_head_icon">
                <el-tree
                  :data="treeData5"
                  :props="props"
                  :expand-on-click-node="false"
                  :default-expand-all="true"
                  check-on-click-node
                  @node-click="handleNodeClick2"
                  class="jsbos-common-el-tree"
                  node-key="id"
                  v-loading="loading"
                >
                  <span class="custom-tree-node" slot-scope="{ node, data }">
                    <img
                      v-if="data.headIcon && data.headIcon != '[]'"
                      class="head_icon"
                      :src="
                        data.headIcon && data.headIcon.substring(0, 4) == 'http'
                          ? data.headIcon
                          : baseApi + '' + data.headIcon
                      "
                      alt=""
                    />
                    <div class="">
                      <div class="select_list_item">
                        <span class="custom_head">{{
                          data.fullName.charAt(0)
                        }}</span>
                      </div>
                    </div>
                    <span class="text">
                      <span class="node_name">{{ node.label }}</span
                      ><br />
                      <span
                        class="node_organization"
                        v-if="data.companyName || data.organizeName"
                        >{{ data.companyName }}/{{ data.organizeName }}</span
                      >
                    </span>
                  </span>
                </el-tree>
              </el-tab-pane>
            </el-tabs>
          </div>
        </div>
        <div class="transfer-pane">
          <div class="transfer-pane__tools">
            <span>已选</span>
            <el-button @click="removeAll" type="text" class="removeAllBtn"
              >清空列表
            </el-button>
          </div>
          <div class="transfer-pane__body shadow right-pane have_head_icon1">
            <template v-for="(item, index) in dataClass">
              <div :key="index" v-if="item.selectArr.length > 0">
                <div class="data_class_name">
                  <div style="padding: 0 10px">
                    <i :class="item.icon"></i>
                    <span class="data_class_name_span">{{ item.name }}</span>
                  </div>

                  <template v-for="(o, i) in item.selectArr">
                    <div :key="i" class="select_list">
                      <img
                        v-if="o.headIcon && o.headIcon != '[]'"
                        class="head_icon"
                        :src="
                          o.headIcon && o.headIcon.substring(0, 4) == 'http'
                            ? o.headIcon
                            : baseApi + '' + o.headIcon
                        "
                        alt=""
                      />
                      <div v-else class="select_list_item">
                        <span class="custom_head">{{
                          o.fullName.charAt(0)
                        }}</span>
                      </div>
                      <span class="text">
                        <span class="node_name">{{ o.fullName }}</span
                        ><br />
                        <span
                          class="node_organization"
                          v-if="o.companyName || o.organizeName"
                          >{{ o.companyName }}/{{ o.organizeName }}</span
                        >
                      </span>
                      <i
                        class="el-icon-delete"
                        @click="removeData1(index, i)"
                      ></i>
                    </div>
                  </template>
                </div>
              </div>
            </template>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="visible = false">{{
          $t("common.cancelButton")
        }}</el-button>
        <el-button type="primary" @click="confirm">{{
          $t("common.confirmButton")
        }}</el-button>
      </span>
    </el-dialog>
    <excludeSelect
      @change="getExclude"
      v-model="excludeIds"
      ref="excludeSelect"
      multiple
    />
  </div>
</template>

<script>
import {
  getImUserSelector,
  getOrganization,
  getSubordinates,
  getUserInfoList,
  getRangeElement,
  getPlayback,
  getPlaybackUser,
} from "@/api/permission/user";
import {
  addResizeListener,
  removeResizeListener,
} from "element-ui/src/utils/resize-event";
import excludeSelect from "./excludeSelect";

export default {
  components: {
    excludeSelect,
  },
  name: "custom-select",
  inject: {
    elForm: {
      default: "",
    },
    elFormItem: {
      default: "",
    },
  },
  props: {
    value: {
      type: [String, Array],
      default: [],
      event: "input", // 默认是 input
    },
    ifActiveName: {
      type: String,
      default: "department",
    },
    placeholder: {
      type: String,
      default: "请选择",
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    multiple: {
      type: Boolean,
      default: false,
    },
    collapseTags: {
      type: Boolean,
      default: false,
    },
    clearable: {
      type: Boolean,
      default: true,
    },
    hasSys: {
      type: Boolean,
      default: false,
    },
    size: String,
    width: {
      default: "500px",
    },
  },
  data() {
    return {
      dataClassTagsList: [],
      dataClass: [
        {
          type: "company",
          name: "公司",
          icon: "icon-ym icon-ym-nav-home",
          selectArr: [],
        },
        {
          type: "department",
          name: "部门",
          selectArr: [],
          icon: "icon-ym icon-ym-tree-department1",
        },
        {
          type: "Role",
          name: "角色",
          selectArr: [],
          icon: "icon-ym icon-ym-generator-jobs",
        },
        {
          type: "Position",
          name: "岗位",
          selectArr: [],
          icon: "icon-ym icon-ym-generator-modifier",
        },
        {
          type: "Group",
          name: "分组",
          selectArr: [],
          icon: "icon-ym icon-ym-generator-department",
        },
        {
          type: "user",
          name: "用户",
          selectArr: [],
          icon: "icon-ym icon-ym-tree-user2",
        },
      ],
      exclude: {
        type: "exclude",
        name: "排除人员",
        selectArr: [],
        icon: "icon-ym icon-ym-generator-jobs",
      },
      visible: false,
      keyword: "",
      activeName: "",
      nodeId: "",
      innerValue: "",
      loading: false,
      props: {
        children: "children",
        label: "fullName",
        isLeaf: "isLeaf",
      },
      treeData: [],
      treeData2: [],
      treeData3: [],
      treeData4: [],
      treeData5: [],
      selectedData: [],
      tagsList: [],
      inputHovering: false,
      inputWidth: 0,
      initialInputHeight: 0,
      excludeIds: [],
      userName: "",
    };
  },
  watch: {
    exclude: {
      handler(newValue, oldValue) {
        console.log(newValue, oldValue, "----111");
        // this.obj.name = newValue;
        this.excludeIds = [];
        newValue.selectArr.forEach((item) => {
          this.excludeIds.push(item.id);
        });
      },
      deep: true,
    },
    value(val) {
      this.getPlaybackFn();
    },
    selectDisabled() {
      this.$nextTick(() => {
        this.resetInputHeight();
      });
    },
    activeName(val) {
      if (this.activeName != "all") {
        this.keyword = "";
      }
      if (!val) return;
      this.nodeId = "1";
      this.treeData = [];
      this.treeData2 = [];
      this.treeData3 = [];
      this.treeData4 = [];
      this.treeData5 = [];
      this.getData();
    },
  },
  computed: {
    baseApi() {
      return "https://gl.bringspring.com/jsbos-manager";
      return window.config.VUE_APP_BASE_API;
    },
    showClose() {
      let hasValue = this.multiple
        ? Array.isArray(this.value) && this.value.length > 0
        : this.value !== undefined && this.value !== null && this.value !== "";
      let criteria =
        this.clearable &&
        !this.selectDisabled &&
        this.inputHovering &&
        hasValue;
      return criteria;
    },
    currentPlaceholder() {
      if (this.multiple && Array.isArray(this.value) && this.value.length) {
        return "";
      } else {
        return this.placeholder;
      }
    },
    selectDisabled() {
      return this.disabled || (this.elForm || {}).disabled;
    },
    _elFormItemSize() {
      return (this.elFormItem || {}).elFormItemSize;
    },
    selectSize() {
      return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;
    },
    collapseTagSize() {
      return ["small", "mini"].indexOf(this.selectSize) > -1 ? "mini" : "small";
    },
  },
  created() {
    this.getPlaybackFn();

    this.dataClassTagsList = JSON.parse(JSON.stringify(this.dataClass));
  },
  mounted() {
    addResizeListener(this.$el, this.handleResize);

    const reference = this.$refs.reference;
    if (reference && reference.$el) {
      const sizeMap = {
        medium: 36,
        small: 32,
        mini: 28,
      };
      const input = reference.$el.querySelector("input");
      this.initialInputHeight =
        input.getBoundingClientRect().height || sizeMap[this.selectSize];
    }
    if (this.multiple) {
      this.resetInputHeight();
    }
    this.$nextTick(() => {
      if (reference && reference.$el) {
        this.inputWidth = reference.$el.getBoundingClientRect().width;
      }
    });
    // this.setDefault();
  },
  beforeDestroy() {
    if (this.$el && this.handleResize)
      removeResizeListener(this.$el, this.handleResize);
  },
  methods: {
    getPlaybackUserFn() {
      let that = this;
      this.userName = "";
      let userNameTxt = "";

      getPlaybackUser(this.value).then((res) => {
        res.data.list.forEach((item) => {
          userNameTxt = userNameTxt + item.fullName + "、";
        });
        this.userName = userNameTxt;
        console.log(this.userName, userNameTxt, "-------++++++++");
      });
    },
    getPlaybackFn() {
      if (this.$isEmpty(this.value)) {
        return;
      }
      getPlayback(this.value).then((res) => {
        console.log(res);
        this.dataClass = [
          {
            type: "company",
            name: "公司",
            icon: "icon-ym icon-ym-nav-home",
            selectArr: [],
          },
          {
            type: "department",
            name: "部门",
            selectArr: [],
            icon: "icon-ym icon-ym-tree-department1",
          },
          {
            type: "Role",
            name: "角色",
            selectArr: [],
            icon: "icon-ym icon-ym-generator-jobs",
          },
          {
            type: "Position",
            name: "岗位",
            selectArr: [],
            icon: "icon-ym icon-ym-generator-modifier",
          },
          {
            type: "Group",
            name: "分组",
            selectArr: [],
            icon: "icon-ym icon-ym-generator-department",
          },
          {
            type: "user",
            name: "用户",
            selectArr: [],
            icon: "icon-ym icon-ym-tree-user2",
          },
        ];
        res.data.list.forEach((item) => {
          this.dataClass.forEach((o, i) => {
            if (item.type != "exclude") {
              if (item.type == o.type) {
                this.dataClass[i].selectArr.push(item);
              }
            } else {
              this.exclude.selectArr.push(item);
            }
          });
        });
        this.dataClassTagsList = JSON.parse(JSON.stringify(this.dataClass));
      });

      let excludeIds = [];
      this.value.forEach((item) => {
        if (item.type == "exclude") {
          excludeIds = item.selectArr;
        }
      });
      getUserInfoList(excludeIds).then((res) => {
        this.exclude.selectArr = res.data.list;
      });
      this.getPlaybackUserFn();
    },
    emitData() {
      let filterData = [];
      this.dataClassTagsList.forEach((item, index) => {
        filterData.push({
          type: item.type,
          selectArr: [],
        });
        item.selectArr.forEach((o) => {
          filterData[index].selectArr.push(o.id);
        });
      });
      let excludeIds = [];
      this.exclude.selectArr.forEach((o) => {
        excludeIds.push(o.id);
      });
      filterData.push({
        type: "exclude",
        selectArr: excludeIds,
      });
      this.$emit("input", filterData);
      console.log(filterData, "------++++++");
    },
    getExclude(ids, data) {
      this.exclude.selectArr = data;
      this.emitData();
    },
    changeExclude() {
      this.$refs.excludeSelect.openDialog();
    },
    emptyChange() {
      this.exclude.selectArr = [];
      this.dataClassTagsList.forEach((item) => {
        item.selectArr = [];
      });
      this.dataClass.forEach((item) => {
        item.selectArr = [];
      });
      this.userName = "";
      this.emitData();
      // this.getPlaybackFn();
    },
    closeTag(i, n) {
      this.dataClassTagsList[i].selectArr.splice(n, 1);
      // this.$emit("change", this.dataClassTagsList);
      this.emitData();
    },
    closeTagExclude(i) {
      this.exclude.selectArr.splice(i, 1);
      this.emitData();
    },
    onClose() {
      this.activeName = "";
    },
    removeData1(i, n) {
      console.log(i, n);
      console.log(this.dataClass[i].selectArr);
      this.dataClass[i].selectArr.splice(n, 1);
      // this.dataClassTagsList[i].selectArr.splice(n, 1);
    },
    openDialog() {
      if (this.selectDisabled) return;
      this.dataClass = JSON.parse(JSON.stringify(this.dataClassTagsList));
      this.visible = true;
      this.activeName = this.ifActiveName;
      this.keyword = "";
      this.nodeId = "1";
      this.selectedData = [];
      // this.setDefault();
    },
    confirm() {
      this.dataClassTagsList = JSON.parse(JSON.stringify(this.dataClass));
      // this.$emit("change", this.dataClassTagsList);
      this.emitData();
      this.visible = false;
    },
    emptyChangeExclude() {
      this.exclude.selectArr = [];
      this.emitData();
    },
    // setDefault() {
    //   if (!this.value || !this.value.length) {
    //     this.innerValue = "";
    //     this.selectedData = [];
    //     this.tagsList = [];
    //     return;
    //   }
    //   const arr = this.multiple ? this.value : [this.value];
    //   const hasSysItem = arr.some((o) => o === "currentUser");
    //   getUserInfoList(arr).then((res) => {
    //     this.selectedData = res.data.list;
    //     if (hasSysItem) {
    //       this.selectedData.push({
    //         id: "currentUser",
    //         fullName: "当前用户",
    //       });
    //     }
    //     if (this.multiple) {
    //       this.innerValue = "";
    //       this.tagsList = JSON.parse(JSON.stringify(this.selectedData));
    //     } else {
    //       this.innerValue = this.selectedData.length
    //         ? this.selectedData[0].fullName
    //         : "";
    //     }
    //     this.$nextTick(() => {
    //       if (this.multiple) {
    //         this.resetInputHeight();
    //       }
    //     });
    //   });
    // },
    getData() {
      //关键字进行全局搜索
      // if (this.keyword) {
      //   this.activeName = "all";
      // }
      if (this.activeName === "all") {
        this.getAllList();
      } else if (this.activeName === "department") {
        this.loading = true;
        getRangeElement("Organize", {
          keyword: this.keyword,
        }).then((res) => {
          this.treeData2 = res.data.list;
          this.loading = false;
        });
      } else if (this.activeName === "Role") {
        this.loading = true;
        getRangeElement("Role", {
          keyword: this.keyword,
        }).then((res) => {
          this.treeData3 = res.data.list;
          this.loading = false;
        });
      } else if (this.activeName === "Position") {
        this.loading = true;
        getRangeElement("Position", {
          keyword: this.keyword,
        }).then((res) => {
          this.treeData4 = res.data.list;
          this.loading = false;
        });
      } else if (this.activeName === "Group") {
        this.loading = true;
        getRangeElement("Group", {
          keyword: this.keyword,
        }).then((res) => {
          this.treeData5 = res.data.list;
          this.loading = false;
        });
      } else {
        this.loading = false;
      }
    },
    getAllList() {
      this.loading = true;
      if (this.keyword) this.nodeId = "1";
      getImUserSelector(this.nodeId, this.keyword).then((res) => {
        this.treeData = res.data.list;
        this.loading = false;
      });
    },
    loadNode(node, resolve) {
      if (node.level === 0) {
        this.nodeId = "1";
        return resolve(this.treeData);
      }
      this.nodeId = node.data.id;
      getImUserSelector(this.nodeId).then((res) => {
        resolve(res.data.list);
      });
    },
    handleNodeClick(data) {
      // if (data.type !== "user") return;
      this.handleNodeClick2(data);
    },
    handleNodeClick2(data) {
      console.log(data);
      this.dataClass.forEach((item) => {
        if (item.type == data.type) {
          const boo = item.selectArr.some((o) => o.id === data.id);
          if (boo) return;
          console.log(this.multiple, "----");
          !this.multiple
            ? item.selectArr.push(data)
            : (item.selectArr = [data]);
        }
      });
      console.log(this.dataClass);
      // const boo = this.selectedData.some((o) => o.id === data.id);
      // console.log(boo);
      // if (boo) return;
      // const item = {
      //   id: data.id,
      //   fullName: data.fullName,
      // };
      // this.multiple
      //   ? this.selectedData.push(item)
      //   : (this.selectedData = [item]);
    },
    removeAll() {
      this.dataClass = [
        {
          type: "company",
          name: "公司",
          icon: "icon-ym icon-ym-nav-home",
          selectArr: [],
        },
        {
          type: "department",
          name: "部门",
          selectArr: [],
          icon: "icon-ym icon-ym-tree-department1",
        },
        {
          type: "Role",
          name: "角色",
          selectArr: [],
          icon: "icon-ym icon-ym-generator-jobs",
        },
        {
          type: "Position",
          name: "岗位",
          selectArr: [],
          icon: "icon-ym icon-ym-generator-modifier",
        },
        {
          type: "Group",
          name: "分组",
          selectArr: [],
          icon: "icon-ym icon-ym-generator-department",
        },
        {
          type: "user",
          name: "用户",
          selectArr: [],
          icon: "icon-ym icon-ym-tree-user2",
        },
      ];
      this.selectedData = [];
    },
    removeData(index) {
      this.selectedData.splice(index, 1);
    },
    deleteTag(event, index) {
      this.selectedData.splice(index, 1);
      this.confirm();
      event.stopPropagation();
    },
    handleClearClick(event) {
      this.selectedData = [];
      this.confirm();
      event.stopPropagation();
    },
    // resetInputWidth() {
    //   this.inputWidth = this.$refs.reference.$el.getBoundingClientRect().width;
    // },
    handleResize() {
      // this.resetInputWidth();
      // if (this.multiple) this.resetInputHeight();
    },
    resetInputHeight() {
      if (this.collapseTags) return;
      this.$nextTick(() => {
        if (!this.$refs.reference) return;
        let inputChildNodes = this.$refs.reference.$el.childNodes;
        let input = [].filter.call(
          inputChildNodes,
          (item) => item.tagName === "INPUT"
        )[0];
        const tags = this.$refs.tags;
        const tagsHeight = tags
          ? Math.round(tags.getBoundingClientRect().height)
          : 0;
        const sizeInMap = this.initialInputHeight || 40;
        input.style.height =
          this.selectedData.length === 0
            ? sizeInMap + "px"
            : Math.max(
                tags ? tagsHeight + (tagsHeight > sizeInMap ? 6 : 0) : 0,
                sizeInMap
              ) + "px";
      });
    },
  },
  directives: {
    "debounce-input": {
      inserted(el, binding) {
        let timeout;
        el.addEventListener("input", () => {
          clearTimeout(timeout);
          timeout = setTimeout(() => {
            binding.value();
          }, parseInt(binding.arg) || 300);
        });
      },
    },
  },
};
</script>
<style lang="scss" scoped>
.data_class_name {
  // padding: 0 10px;
  font-weight: 500;
  line-height: 30px;
  .data_class_name_span {
    margin-left: 5px;
  }
}
.custom_head {
  display: inline-block;
  height: 40px;
  width: 40px;
  line-height: 40px;
  border-radius: 40px;
  font-size: 16px;
  margin-right: 10px;
  text-align: center;
  color: #ffffff;
  background-color: #5aaffc;
}
.select_list {
  padding: 0px 25px;
  cursor: pointer;
  .select_list_item {
    display: inline-block;
    padding: 7px 0;
    // border-bottom: 1px solid #efefef;
  }
}
.select_list:hover {
  background-color: #f5f7fa;
}
.change_range {
  background-color: #fff;
  padding: 15px;
  .title {
    font-size: 16px;
  }
  .top_button {
    float: right;
    position: relative;
    top: -6px;
  }
}
.change_data {
  margin-top: 20px;
  border-radius: 5px;
  background-color: #f3f3f3;
  padding: 20px 15px;
  .title {
    font-size: 15px;
    color: var(--word-1);
  }
  .data_range {
    margin-top: 15px;
    font-size: 14px;
    line-height: 24px;
    color: #555;
    .range_item {
      margin-bottom: 10px;
      .change_tag {
        >>> .el-tag {
          color: var(--word-2) !important;
          border: 1px solid var(--border-2);
        }
        >>> .el-icon-close {
          color: var(--word-2) !important;
          background-color: rgba(0, 0, 0, 0) !important;
        }
        >>> .el-icon-close:hover {
          color: #ffffff !important;
          background-color: rgba(0, 0, 0, 0.3) !important;
        }
      }
    }
  }
  .change_tag {
    display: inline-block;
    width: calc(100% - 50px);
  }
  .change_btn {
    // margin-left: 20px;
    display: inline-block;
    width: calc(100% - 100px);
  }
  .exclude_tag {
    // margin-left: 63px;
    margin-top: 10px;
    >>> .el-tag {
      margin-left: 0px !important;
      margin-right: 10px;
    }
    >>> .el-icon-close {
      color: #f56c6c !important;
      background-color: rgba(0, 0, 0, 0) !important;
    }
    >>> .el-icon-close:hover {
      color: #ffffff !important;
      background-color: rgba(0, 0, 0, 0.3) !important;
    }
  }
}
>>> .el-tabs__item {
  width: 25% !important;
}
.head_icon {
  width: 40px;
  height: 40px;
  border-radius: 40px;
  margin-right: 10px;
}
.have_head_icon {
  >>> .el-tree-node__content {
    height: 54px !important;
  }
  .text {
    line-height: 18px !important;
  }
  .node_name {
    color: #333;
  }
  .node_organization {
    color: #999999;
  }
}
.right-pane {
  .select_list {
    position: relative;
    overflow: hidden;
    height: 54px;
    display: flex;
    align-items: center;
    -webkit-box-align: center;
    .select_list_item {
      float: left;
    }
    .head_icon {
      float: left;
    }
    .text {
      flex: 1;
      float: left;
      line-height: 20px !important;
      .node_name {
        color: #333;
        font-weight: normal;
      }
      .node_organization {
        color: #999999;
        font-weight: normal;
      }
    }
  }
  >>> .el-icon-delete {
    position: absolute;
    right: 14px;
    top: 17px;
  }
  >>> .el-icon-delete:hover {
    color: #f56c6c;
  }
}
.prople_name {
  display: inline-block;
  height: 46px;
  // white-space: nowrap; /* 不换行 */
  overflow: hidden; /*内容超出后隐藏*/
  text-overflow: ellipsis; /*超出内容显示为省略号*/
  display: -webkit-box; /*将对象作为弹性伸缩盒子模型显示*/
  -webkit-box-orient: vertical; /*从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）*/
  -webkit-line-clamp: 2;
}
</style>
